/**
 * 〈所属模块〉通用
 * 〈功能描述〉H5页面
 *
 * @author wuuyunan
 * @date 2017/9/20
 */

import React, { Component } from "react";
import {
  StyleSheet, View, WebView, StatusBar,
} from "react-native";
import { Color, FontSize } from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
// import TitleBarBackButton from "../widget/common/TitleBarBackButton";
import HeaderTitleText from "../widget/common/HeaderTitleText";

let url = "";
export default class H5Page extends Component {
  constructor(props) {
    super(props);
    url = NavigatorUtil.getPageParam(props, "url");
    url = url.substr(0, 4).toLowerCase() === "http" ? url : `https://${url}`;
    url = url.substr(0, 5).toLowerCase() === "https" ? url : `https://${url.substr(5, url.length)}`;
  }

  static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    const { title } = state.params;

    // const headerLeft = (
    //   <TitleBarBackButton
    //     onPress={() => {
    //       NavigatorUtil.goBack(navigation);
    //     }}
    //   />
    // );
    // const headerRight = <TitleBarBackButton imgSource={null} onPress={() => {}} />;
    return {
      title, // 设置标题内容
      headerTitle: <HeaderTitleText title={title} />,
      drawerLockMode: "locked-closed",
      headerBackTitle: "666",
      // headerLeft,
      // headerRight,
    };
  };

  handleMessage(message) {
    console.log(this.props);
    const { setParams } = this.props.navigation;
    setParams({ title: message.nativeEvent.data });
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar translucent={false} backgroundColor={Color.bg_titlebar} barStyle="light-content" />
        <WebView
          source={{ uri: url }}
          style={{ flex: 1, backgroundColor: Color.black }}
          onLoadEnd={e => console.log("onLoadEnd")}
          injectedJavaScript="window.postMessage(document.title)"
          onMessage={message => {
            this.handleMessage(message);
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: FontSize.SIZE_20,
    textAlign: "center",
    margin: 10,
  },

  button: {
    flex: 1,
    marginTop: 10,
    borderColor: Color.text_assist,
    borderRadius: 5,
    borderWidth: StyleSheet.hairlineWidth,
    padding: 10,
    margin: 2,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.white,
  },
});
